<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <!--<script type="text/javascript" src="/js/system/user/update_password.js" th:src="@{/js/system/user/update_password.js}"></script>-->
    <link rel="stylesheet" th:href="@{/css/finance.css}"/>
    <!--<link rel="stylesheet"  th:href="@{/css/bootstrap.min.css}">-->
    <script th:src="@{/libs/jquery.min.js}"></script>
    <script th:src="@{/plugin/layer/layer.js}"></script>
    <link rel="stylesheet" th:href="@{/plugin/font-awesome-4.7.0/css/font-awesome.min.css}"/>
    <link th:href="@{/plugin/base.css}" rel="stylesheet"/>


    <!--<link rel="stylesheet" th:href="@{/plugin/jqgrid/ui.jqgrid-bootstrap.css}">-->
    <!--<link rel="stylesheet" th:href="@{/plugin/jqgrid/ui.jqgrid.css}">-->
    <!--<link rel="stylesheet" th:href="@{/plugin/jqgrid/ui.jqgrid-bootstrap-ui.css}">-->
    <!--<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">-->
    <!--<link rel="stylesheet"th:href="@{/css/font-awesome.min.css}">-->

    <!--<script type="text/javascript" src="js/grid.locale-cn.js"></script>-->
  <!--  <link rel="stylesheet" th:href="@{/plugin/jqgrid/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugin/jqgrid/ui.jqgrid-bootstrap.css}">
    <script th:src="@{/libs/bootstrap.min.js}"></script>
    <script th:src="@{/plugin/jqgrid/grid.locale-cn.js}"></script>
    <script th:src="@{/plugin/jqgrid/jquery.jqGrid.min.js}"></script>
    <script th:src="@{/plugin/ztree/jquery.ztree.all.min.js}"></script>-->


    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/javascript" th:src="@{/plugin/jqgrid/js/jquery.min.js}"></script>
    <script type="text/ecmascript" th:src="@{/plugin/jqgrid/js/jquery-ui.min.js}"></script>
    <!-- We support more than 40 localizations -->
    <script type="text/javascript" th:src="@{/plugin/jqgrid/jqgrid/js/i18n/grid.locale-cn.js}"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" th:src="@{/plugin/jqgrid/js/jquery.jqGrid.js}"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" th:href="@{/plugin/jqgrid/jqgrid/css/bootstrap.min.css}">
    <!--<meta name="viewport" content="width=device-width,initial-scale=1.0">-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
     <!--<link rel="stylesheet" th:href="@{/plugin/jqgrid/jqgrid/css/octicons.css}">-->
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet"  type="text/css"  media="screen" th:href="@{/plugin/jqgrid/jqgrid/css/ui.jqgrid-bootstrap4.css}" />
    <script>
        // $.jgrid.defaults.width =500;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap4';
        $.jgrid.defaults.iconSet = "Octicons";
    </script>
    <script th:src="@{/plugin/jqgrid/js/bootstrap.min.js}"></script>

    <meta content="telephone=yes" name="format-detection"/>
    <meta content="email=no" name="format-detection"/>

    <!--<script src="js/jquery-1.10.0.min.js"></script>-->
    <script th:src="@{/plugin/mobiscroll/js/mobiscroll_002.js}" type="text/javascript"></script>
    <script th:src="@{/plugin/mobiscroll/js/mobiscroll_004.js}" type="text/javascript"></script>
    <link th:href="@{/plugin/mobiscroll/css/mobiscroll_002.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/plugin/mobiscroll/css/mobiscroll.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/plugin/mobiscroll/js/mobiscroll.js}" type="text/javascript"></script>
    <script th:src="@{/plugin/mobiscroll/js/mobiscroll_003.js}" type="text/javascript"></script>
    <script th:src="@{/plugin/mobiscroll/js/mobiscroll_005.js}" type="text/javascript"></script>
    <link th:href="@{/plugin/mobiscroll/css/mobiscroll_003.css}" rel="stylesheet" type="text/css">
    <style>

        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
            height: auto;
        }

        th.ui-th-column div {
            white-space: normal !important;
            height: auto !important;
            padding: 0px;
        }
    </style>
    <title>共赢会</title>
    <script type="text/javascript">
        $(function () {
            var currYear = (new Date()).getFullYear();
            var opt = {};
            opt.date = {preset: 'date'};
            opt.datetime = {preset: 'datetime'};
            opt.time = {preset: 'time'};
            opt.default = {
                theme: 'android-ics light', //皮肤样式
                display: 'modal', //显示方式
                mode: 'scroller', //日期选择模式
                dateFormat: 'yyyy-mm-dd',
                lang: 'zh',
                showNow: true,
                nowText: "今天",
                startYear: currYear - 10, //开始年份
                endYear: currYear + 80 //结束年份
            };
            $("#startDate").mobiscroll($.extend(opt['date'], opt['default']));//年月日型
            $("#endDate").mobiscroll($.extend(opt['date'], opt['default']));//年月日型
            // var optDateTime = $.extend(opt['datetime'], opt['default']);
            // var optTime = $.extend(opt['time'], opt['default']);
            // $("#AbsentEndDate").mobiscroll(optDateTime).datetime(optDateTime);//年月日时分型
            // $("#EndTime").mobiscroll(optTime).time(optTime);//时分型
        });
    </script>
</head>
<body class="body">
<div class="topText">财务明细</div>
<div class="queryCs">
        <!--时间:<input id="startDate" runat="server" readonly="readonly"/>- -->
        <!--<input id="endDate" runat="server" readonly="readonly" />-->
    <!--&lt;!&ndash;<br/>&ndash;&gt;-->
        <!--收支类型:<input runat="server"   type="text"/>-->
    <!--<button>搜索</button>-->
</div>
<section class="job-module">

    <dl class="retrie">
        <dt >
            <div class="queryCs">
                收支类型:  <a class="Typeshow" id="dq" href="javascript:;"><span>全部</span> <i class="fa fa-caret-down"></i> </a>
                时间:<input id="startDate" runat="server" readonly="readonly"/>-
                <input id="endDate" runat="server" readonly="readonly" />
                <br/>
            </div>
        </dt>

        <dd class="dq" style="z-index:1000">
            <ul class="slide downlist">
                <li data-id="全部" data-name="全部" onclick="UpDataList(this)"><a href="#">全部</a></li>
                <li data-id="收入" data-name="收入" onclick="UpDataList(this)"><a href="#">收入</a></li>
                <li data-id="支出" data-name="支出" onclick="UpDataList(this)"><a href="#">支出</a></li>

            </ul>
        </dd>
    </dl>
</section>
<div style="margin-top: 15px">
    <table id="jqGrid"></table>
    <div id="jqGridPager" style="width: 60%;float: left"></div>
</div>
<!--日期 姓名 收支 金额 实时余额  项目  备注-->
</body>
<script type="text/javascript" th:src="@{/js/finance.js}"></script>
</html>